<template>
  <div>
    <el-card class="box-card" style="display:flex">
        <!-- <el-radio v-model="radio" value="false" size="medium"></el-radio> -->
        <div class="card">
            <img src="../assets/logo.png" style="width:100px;height:100px">
            <!-- <img :src="imgUrl" style="width:100px;height:100px"> -->
            <div style="margin:auto 30px">
              <div class="name">{{value.name}}</div>
              <div class="price" style="color:red">价格：{{value.price}}</div>
            </div>
            <template>
              <el-input-number class="input" style="right:0"  v-model="value.num" @change="handleChange" :min="0" :max="10" label="描述文字"></el-input-number>
            </template>
            <div style="margin:30px">金额： {{totalPriceEve}}</div>
        </div>
        
    </el-card>
  </div>
</template>

<script>
export default {
  name: "ShopCard",
  props:{
    value:Object
  },
  data() {
      return {
          imgUrl:'../assets/logo.png',
          totalPriceEve:0
      }
  },

  methods: {
    handleChange(num){
      this.totalPriceEve = num * this.value.price
      this.$emit('numChange',this.totalPriceEve)
    }
  },
};
</script>

<style scoped>
.box-card{
    width: 800px;
    font-size:30px;
}
.card{
  display: flex;
  justify-content: space-around;
  align-items: center;
}

</style>